<template>
	<view class="">
		<view>
			<u-cell-group>
				<u-cell-item center value="" :arrow="false" title="贷款金额">
					<u-input slot="right-icon" v-model="form.totalAmount" input-align="right" type="number"
						placeholder="请输入" @blur="vpnGet1()" maxlength="6"/>
					<text style="margin-left: 8px;" slot="right-icon">万元</text>
				</u-cell-item>
				<u-cell-item center value="" :arrow="false" title="贷款期限">
					<u-input slot="right-icon" v-model="form.term" input-align="right"
						type="number" placeholder="请输入" style="margin-right: 20rpx;" maxlength="2"/>
					<u-subsection height="50" slot="right-icon" :list="list1" :current="current1" @change="changeCurrent1" mode="subsection"></u-subsection>
				</u-cell-item>
				<u-cell-item center value="" :arrow="false" title="利率">
					<u-input slot="right-icon" v-model="form.rate" input-align="right"
						type="text" placeholder="可保留两位小数"  @blur="vpnGet()" style="margin-right: 20rpx;"/>
					<text style="margin-right: 16rpx;" slot="right-icon">%</text>
					<u-subsection height="50" slot="right-icon" :list="list2" :current="current2" @change="changeCurrent2" mode="subsection"></u-subsection>
				</u-cell-item>
				<u-cell-item center @click="clickRepaymentMethod()" :value="form.repaymentMethod" :arrow="true"
					title="还款方式">
					
				</u-cell-item>
			</u-cell-group>
			<view class="_flex _justify_center" style="padding:40rpx 32rpx;background-color: #fff;">
				<view  style="width: 50%;margin-right: 40rpx;">
					<u-button type="primary" shape="circle"  @click="reset">重置</u-button>
				</view>
				<view  style="width: 50%;">
					<u-button type="primary" shape="circle" @click="goCalculation">计算</u-button>
				</view>
			</view>
			<view class="resultPart" v-if="resultOK">
				<view class="card">
					<view class="cardPart">
						<view class="cardNei _flex">
							<view style="margin-right: 60rpx;">
								<view class="title">
									{{principalInterestCount}}
								</view>
								<view class="titleLittle">
									总还款金额(元)
								</view>
							</view>
							<view >
								<view class="title">
									{{totalInterest}}
								</view>
								<view class="titleLittle">
									总利息(元)
								</view>
							</view>
						</view>
						<view class="cardNei _flex">
						<view class="">
							<view class="title">
								{{annualInterest}}
							</view>
							<view class="titleLittle">
								年利率
							</view>
						</view>
						<view class="">
							<view class="title">
								{{monthlyInterest}}
							</view>
							<view class="titleLittle">
								月利率
							</view>
						</view>
						<view class="">
							<view class="title">
								{{dailyInterest}}
							</view>
							<view class="titleLittle">
								日利率
							</view>
						</view>
					</view>
					</view>
				</view>
				<view class="jihua">
					<view style="margin-bottom: 24rpx">
						<text style="font-size: 32rpx;font-weight: bold;">还款计划（单位：元）</text><text style="color:#999">假定每月15日还款</text>
					</view>
					<view class="tableJihua">
						<u-table border-color="#fff" font-size="22">
							<u-tr class="u-tr">
								<u-th class="u-th">期数</u-th>
								<u-th class="u-th">月供</u-th>
								<u-th class="u-th">本金</u-th>
								<u-th class="u-th">利息</u-th>
								<u-th class="u-th">剩余本金</u-th>
							</u-tr>
							<u-tr class="u-tr" v-for="item in tableList">
								<u-td class="u-td">{{item.date}}</u-td>
								<u-td class="u-td">{{item.monthTotalRepayment}}</u-td>
								<u-td class="u-td">{{item.principal}}</u-td>
								<u-td class="u-td">{{item.interest}}</u-td>
								<u-td class="u-td">{{item.remainingPrincipal}}</u-td>
							</u-tr>
						</u-table>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showPopup" mode="bottom" :mask-close-able="true">
			<view class="poppupBox">
				<view class="poppupBoxlist" v-for="item in popupList" @click="getData(item)">
					<view style="margin-bottom:20rpx;font-size: 32rpx;font-weight: bold;">{{item.type}}</view>
					<view style="color:#999">{{item.describe}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import API from "@/api/report.js"
export default {
	data() {
		return {
			showPopup:false,
			current1:0,
			current2:0,
			type:'',
			popupList:[
				{
					type:'等额本息',
					describe:'月供每月相同，本金逐月递增，利息逐月递减',
					index:'1'
				},
				{
					type:'等额本金',
					describe:'月供逐月递减，本金每月相同，利息逐月递减',
					index:'2'
				},
				{
					type:'等额等息',
					describe:'月供、本金、利息每月相同',
					index:'3'
				},
				{
					type:'先息后本',
					describe:'每月还固定利息，到期还全部本金',
					index:'4'
				},
				{
					type:'到期本息',
					describe:'到期一次性还清全部本金和利息',
					index:'5'
				}
			],
			list1:[
				{
					name: '年'
				},
				{
					name: '月'
				},
			],
			list2:[
				{
					name: '年'
				},
				{
					name: '月'
				},
			],
			form:{
				totalAmount:'',
				term:'',
				rate:'',
				repaymentMethod:'请选择'
			},
			resultOK:false,//计算结果
			tableList:[],
			principalInterestCount:'',//总还款
			totalInterest:'',//总利息
			annualInterest:'',//年利率
			monthlyInterest:'',//月利率
			dailyInterest:'' //日利率
		}
	},
	onLoad(options) {
		// console.log(options.totalAmount)
		this.form.totalAmount = options.totalAmount
	},
	methods:{
		// 点击还款方式
		clickRepaymentMethod(){
			this.showPopup = true
		},
		// 获取还款方式
		getData(item){
			this.type = item.type
			this.form.repaymentMethod = item.type
			this.type = item.index
			this.showPopup = false
		},
		reset(){
			this.form = {
				totalAmount:'',
				term:'',
				rate:'',
				repaymentMethod:'请选择'
			}
			this.resultOK = false
		},
		changeCurrent1(index){
			this.current1 = index
		},
		changeCurrent2(index){
			this.current2 = index
		},
		vpnGet1(e){
			var regy = /^(0|[1-9]\d{0,2})(\.\d{1,2})?$/;
			console.log(regy.test(this.form.totalAmount))
			if(!regy.test(this.form.totalAmount)){
				this.form.totalAmount = ''
				this.$u.toast('最多三位整数，可保留两位小数');
					return false
			}
		},
		vpnGet(e){
			// this.form.rate = null;
			var regx = /^((100)|([1-9][0-9]{1})|([0-9]\.[0-9][1-9]{0,1})|([0-9]\.[1-9]{1,2})|([1-9][0-9]\.[1-9]{1,2})|([1-9][0-9]\.[0-9][1-9]{0,1}))$/;
			console.log(regx.test(this.form.rate))
			if(!regx.test(this.form.rate)){
				this.form.rate = ''
				this.$u.toast('请输入正确利率，可保留两位小数');
					return false
			}
			
			
			
		},
		// 计算
		goCalculation(){
			if(!this.form.totalAmount){
				this.$u.toast('请输入贷款金额');
				return false
			}
			if(!this.form.term){
				this.$u.toast('请输入贷款期限');
				return false
			}
			if(!this.form.rate){
				this.$u.toast('请输入利率');
				return false
			}
			if(this.form.repaymentMethod=="请选择"){
				this.$u.toast('请选择还款方式');
				return false
			}
			this.resultOK = true
			let data = {
				totalAmount:this.form.totalAmount,
				timeLimitType:this.current1+1,
				timeLimit:this.form.term,
				rateType:this.current2+1,
				rate:this.form.rate,
				type:this.type
			}
			API.getCalculator(data).then(res=>{
				// console.log(res.data)
				this.tableList = res.data.repaymentDate
				this.principalInterestCount = res.data.principalInterestCount,//总还款
				this.totalInterest = res.data.totalInterest//总利息
				this.annualInterest = res.data.annualInterestRate//年利率
				this.monthlyInterest = res.data.monthlyInterestRate//月利率
				this.dailyInterest = res.data.dailyInterestRate //日利率
			})
			
		}
	}
};
</script>
<style scoped lang="scss">
	.poppupBox {
		padding: 20rpx;
	}
	
	.poppupBoxlist {
		padding: 36rpx 20rpx;
		border-bottom: 1px solid #E4E7ED;
		margin-bottom: 20rpx;
	}
	.resultPart{
		.card{
			padding: 12rpx 20rpx;
			.cardPart{
				background-color: #fff;
				border-radius: 20rpx;
				box-shadow: 1rpx 0rpx 10rpx 1rpx #ccc;
			}
			.cardNei{
				>view{
					padding: 30rpx 40rpx;
				}
				.title{
					font-size: 38rpx;
					margin-bottom: 20rpx;
				}
				.titleLittle{
					color: #999;
				}
			}
		}
	}
	.jihua{
		background-color: #fff;
		padding: 30rpx 20rpx;
	}
	.tableJihua {
		u-table {
			u-tr:nth-child(2n+1) {
				.u-td {
					background-color: #EEEFF3;
				}
			}
	
			u-tr:nth-child(2n) {
				.u-td {
					background-color: #F4F8F9;
				}
			}
		}
	}
	
</style>
<style lang="scss">
	.tableJihua {
		u-table{
			u-tr{
				.u-th{
					background-color: #D6DEE5;
				}
			}
		}
	}
</style>